<template>
  <div class="order-payment-detail">
    <header>
      <h3>xxxxxxx有限公司-订单结算汇总明细</h3>
      <el-button type="info" class="jzt-button" @click="$router.push({ path: '/order/payment' })">返回上一页</el-button>
    </header>

    <!-- 搜索表单 -->
    <div class="center-search-wrap">
      <div class="pt20 pb20">
        <SearchForm ref="searchFormRef" :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
      </div>
    </div>

    <!-- 表单数据 -->
    <TableMy :list="list" />

    <div class="pt20 pb20" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="pagination.sizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import SearchForm from "@/components/SearchForm";
import useCodeArrStore from "@/store/modules/select";
import { useRouter } from "vue-router";
const router = useRouter();
import TableMy from "./components/Table";

const formData = ref({});
const searchFormRef = ref();
const formList = ref([
  {
    label: "客户信息",
    model: "searchkey",
    type: "input",
    labelWidth: "70",
    placeholder: "请输入客户/姓名/手机号/小区"
  },
  {
    label: "采购单编码",
    model: "code",
    type: "input",
    labelWidth: "100"
  },
  {
    label: "订单时间",
    model: "outTime",
    type: "daterange",
    labelWidth: "70"
  },
  {
    label: "付款状态",
    model: "payStatus",
    type: "select",
    labelWidth: "70",
    data: [
      { label: "待付款", value: 1 },
      { label: "部分付款", value: 2 },
      { label: "已付款", value: 3 }
    ]
  },
  {
    label: "是否回传开票",
    model: "flag1",
    type: "select",
    labelWidth: "100",
    data: [
      { label: "是", value: 1 },
      { label: "否", value: 0 }
    ]
  },
  {
    label: "是否开票",
    model: "flag2",
    type: "select",
    labelWidth: "70",
    data: [
      { label: "是", value: 1 },
      { label: "否", value: 0 }
    ]
  }
]);
const list = ref([{}, {}, {}]);
const pagination = ref({
  page: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0
});

onMounted(async () => {
  getList();
});

const getList = () => {
  console.log("请求列表查询接口===", formData.value);
};

// 表单查询组件submit回调
const search = form => {
  // console.log("查询表单数据===", form);
  if (form) {
    let _form = JSON.parse(JSON.stringify(form));
    _form.actualStockTimeStart = form?.outTime ? form?.outTime[0] : null;
    _form.actualStockTimeEnd = form?.outTime ? form?.outTime[1] : null;
    delete _form.outTime;
    formData.value = _form;
  } else {
    formData.value = {};
  }
  nextTick(() => {
    getList();
  });
};
//清空查询表单
const reset = () => {
  search("");
};

//单位转换
const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.value.page = val;
  getList();
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  .left {
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
.order-payment-detail {
  padding: 0 20px;
  height: calc(100% - 0px);
  overflow-y: auto;
  & > header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 22;
    background-color: white;
    margin: 0 -20px;
    border-radius: 10px 10px 0 0;
    h3 {
      font-size: 18px;
      font-weight: normal;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        top: 8px;
        left: 0;
        background-color: #409eff;
      }
    }
  }
  .center-search-wrap {
    background-color: #f6f8fa;
    padding: 0 20px 0 20px;
    margin-top: 20px;
    :deep(.el-input-group__append) {
      padding: 0 !important;
    }
    :deep(.el-form) {
      flex: 1;
    }
    .btn-wrap {
      width: 80px;
    }
  }
}
</style>
